<template>
  <Header></Header>

  <div class="container mx-auto max-w-screen-xl mt-5 tall">
    <div class="grid grid-cols-4">
      <!-- 左边栏 -->
      <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4">
        <div
          class="mb-3 w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"
        >
          <h2 class="mb-2 font-bold text-gray-900 uppercase dark:text-white">
            分类<i class="iconfont icon-folder_24 ml-2"></i>
          </h2>

          <div
            class="mt-1 pb-4 text-base font-medium text-gray-900 bg-white rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white hover:bg-gray-100 hover:text-blue-400 dark:hover:bg-gray-600 dark:hover:text-white"
            @click="goCatagoryArticleListPage(item.id, item.name)"
            v-for="(item, index) in categories"
            :key="index"
          >
            <a
              class="flex items-end block w-full px-4 py-2 rounded-lg cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600  dark:focus:ring-gray-500 dark:focus:text-white"
            >
              {{ item.name }}<span class="ml-3 text-sm font-normal ">({{ item.count }})</span>
            </a>
            <!-- 进度条组件  保留一位小数 -->
            <div class="progressContainer">
              <div class="progress" :style="{ width: (item.count/articleCount * 100).toFixed(1) + '%' }">
                <b>{{ (item.count/articleCount *100).toFixed(1) }}%</b>
              </div> 
            </div>
          </div>
        </div>
      </div>
      <!-- 右边栏 -->
      <div class="col-span-4 px-3 md:col-span-1 sm:col-span-4">
        <UserInfoCard></UserInfoCard>
      </div>
    </div>
  </div>

  <Footer></Footer>
</template>

<script setup>
import Header from "@/layouts/components/Header.vue";
import Footer from "@/layouts/components/Footer.vue";
import UserInfoCard from "@/components/UserInfoCard.vue";
import { useRouter } from "vue-router";
import { getCategories } from "@/api/frontend/category";
import { ref } from "vue";

const router = useRouter();

const goCatagoryArticleListPage = (id, name) => {
  router.push({ path: "/category/list", query: { id: id, name: name } });
};

const categories = ref([]);
const articleCount = ref(100);
getCategories().then((e) => {
  if (e.success) {
    categories.value = e.data.categoryList;
    articleCount.value = e.data.articleCount;
    console.log(e.data);
  }
});

const progress = ref(78);
</script>
<style scoped>
.tall {
  min-height: 80vh;
}
.progressContainer {
  height: 20px;
  width: 96%;
  border-radius: 6px;
  background-color: #549fba;
  box-shadow: 0 0 6px rgba(75, 207, 250, 0.2);
  margin-left: 2%;
}

.progress {
  background-image: linear-gradient(90deg, #0fbcf9, #34e7e4);
  border-radius: 6px;
  height: 20px;
  line-height: 20px;
  position: relative;
}

b {
  color: rgb(250, 250, 250);
  font-weight: 100;
  font-size: 12px;
  position: absolute;
  left: 40%;
}
</style>
